<template>
  <div>
    <el-container>
      <PublicHeader style="box-shadow: 0 1px 10px 0 #dfdfdf;">
        <template slot="left" style="text-align: left;">
          <div style="margin-right: 15px; display: inline-block; padding: 10px; cursor:pointer;" @click="drawer = true">
            <i class="el-icon-s-operation"></i>
          </div>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="display: inline-block">
            <el-breadcrumb-item :to="{ path: '/courseList' }">我的课堂</el-breadcrumb-item>
            <el-breadcrumb-item>课程内容</el-breadcrumb-item>
          </el-breadcrumb>

          <el-drawer
            :visible.sync="drawer"
            :direction="'ltr'"
            size="315px">
            <template slot="title">
              <div style="width: 96px">
                <img src="/static/logo/logo_blue.png" alt="logo" height="24px">
              </div>
            </template>
            <el-menu
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose">
              <el-menu-item style="width: 100%" v-for="(item, index) in menus" :key="index" @click="toNav(item.route)">
                <span slot="title">{{ item.name }}</span>
              </el-menu-item>
            </el-menu>
          </el-drawer>
        </template>
        <template slot="right">
          <HeaderRight></HeaderRight>
        </template>
      </PublicHeader>
      <el-main>
        <div class="view-class-detail">
          <div>
            <div class="head-layout">
              <img src="../../../static/course/detail/39.png" alt="39"
                   style="border-radius: 8px 8px 0 0;width: 1224px;height: 200px;">
              <div class="head-top">
                <div class="left">
                  <h1 class="text_overflow1" style="text-align: left">{{ course.courseName }}</h1>
                  <h2 class="text_overflow1" style="text-align: left">{{ course.details }}</h2>
                  <div class="code flex-align">
                    <span class="code-but">
                      <img src="../../../static/course/qr.svg" alt="courseCode" width="13px">
                      加课码
                      <span>{{ course.courseCode }}</span>
                    </span>
                    <span style="cursor:pointer;" @click="toMember">已有 {{ course.totalNumber }} 人加入，</span>
                    <span class="mgl-16"> 共 {{ course.period }} 学时 </span>
                  </div>
                </div>
                <div class="right" v-if="$store.getters.userInfo.usertype === 0">
                  <div>
                    <span id="rate-container" class="change" style="margin-right: 8px;">
                      <i class="el-icon-edit-outline" style="padding: 6px;"></i>课堂评价
                    </span>
                    <span class="packdownload">
                      <i class="el-icon-document-copy"></i>打包下载</span>
                    <span class="change">
                      <i class="el-icon-user"></i>
                      成员管理
                    </span>
                    <span style="cursor: pointer;">
                      <i class="el-icon-s-custom"></i>
                      更换皮肤
                    </span>
                  </div>
                  <div class="group flex-align">
                    <span style="cursor: pointer; margin-right: 20px;">
                      <i class="el-icon-view" style="margin-right: 0;"></i>
                      学生视角
                    </span>
                    <span style="cursor: pointer;">
                      <i class="el-icon-share"></i>
                      分享
                    </span>
                    <el-button round>
                      <i class="el-icon-video-play"></i>
                      开始上课
                    </el-button>
                  </div>
                </div>
                <div class="right" v-else>
                  <div class="group flex-align">
                    <el-button round disabled style="color: #c0c4cc;">
                      <i class="el-icon-video-play"></i>
                      暂无课堂
                    </el-button>
                  </div>
                </div>
              </div>
            </div>
            <div class="head-bottom flex-align">
              <div class="bar flex-align">
                <div class="bar-item active"> 课程教学</div>
                <div class="bar-item"> 学情分析</div>
                <div class="bar-item"> 成绩管理</div>
                <div class="bar-item"> 课程设置</div>
              </div>
            </div>
          </div>
          <div class="component-layout">
            <div class="plugins-course-layout">
              <div class="tab-contain">
                <el-tabs v-model="activeNav">
                  <el-tab-pane label="章节目录" name="first">章节目录</el-tab-pane>
                  <el-tab-pane label="互动课件" name="second">互动课件</el-tab-pane>
                  <el-tab-pane label="作业" name="third">
                    <div>
                      <div class="plugin-work">
                        <div class="head-box flex-between">
                          <h3><span>共 {{ tasks.length }} 个活动</span></h3>
                          <div class="flex-align" v-if="$store.getters.userInfo.usertype === 0">
                            <div>
                              <el-button style="margin-right: 20px;display: inline-block">
                                <i class="el-icon-finished"></i>
                                <span>批量操作</span>
                              </el-button>
                            </div>
                            <div>
                              <!--                              <el-dropdown>-->
                              <el-button class="el-button el-button--text el-dropdown-selfdefine" aria-haspopup="list"
                                         aria-controls="dropdown-menu-3409" role="button" tabindex="0"
                                         style="margin-right: 15px;">
                                  <span>
                                    <i class="el-icon-download"></i> 下载所有作业 <i
                                    class="el-icon-arrow-down el-icon--right"></i>
                                  </span>
                              </el-button>
                              <!--                              </el-dropdown>-->
                            </div>
                            <el-button type="success" size="medium" round
                                       style="color: #fff;background-color: #00ca90;border-color: #00ca90;"
                                       @click="createTaskVisible = true"> + 添加作业
                            </el-button>

                            <el-dialog title="添加作业" :visible.sync="createTaskVisible">
                              <el-form :model="createTaskBaseForm" ref="createTaskBaseForm" :rules="baseRules"
                                       style="text-align: left">
                                <el-form-item label="作业标题" label-width="80px" prop="title">
                                  <el-input
                                    v-model="createTaskBaseForm.title"
                                    autocomplete="off"
                                    maxlength="70"
                                    show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item>
                                  <el-input
                                    v-model="createTaskBaseForm.details"
                                    type="textarea"
                                    placeholder="请输入作业描述"></el-input>
                                </el-form-item>
                                <el-form-item label="活动类型标签" label-width="100px">
                                  <el-input
                                    v-model="createTaskBaseForm.label"
                                    autocomplete="off"
                                    maxlength="10"
                                    show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item label="应用环节" label-width="100px">
                                  <el-select v-model="createTaskBaseForm.step" placeholder="请选择">
                                    <el-option
                                      v-for="item in step"
                                      :key="item.value"
                                      :label="item.label"
                                      :value="item.value"
                                      style="display: block">
                                    </el-option>
                                  </el-select>
                                </el-form-item>
                                <el-form-item>
                                  <el-switch
                                    v-model="createTaskMoreVisible"
                                    active-text="立即发布"
                                    @click="createTaskMoreVisible = !createTaskMoreVisible">
                                  </el-switch>
                                </el-form-item>
                                <el-form-item v-if="createTaskMoreVisible">
                                  <el-form ref="createTaskMoreForm" :model="createTaskMoreForm" :rules="moreRules"
                                           label-width="80px">
                                    <el-form-item label="发布时间与截止时间" prop="startTime" label-width="200px"
                                                  style="margin-bottom: 24px">
                                      <el-date-picker
                                        v-model="createTaskMoreForm.startTime"
                                        type="daterange"
                                        range-separator="至"
                                        start-placeholder="发布时间"
                                        end-placeholder="截止时间">
                                      </el-date-picker>
                                    </el-form-item>
                                    <el-form-item label="总分" label-width="100px" prop="totalScore">
                                      <el-input
                                        v-model="createTaskMoreForm.totalScore"
                                        autocomplete="off"
                                        style="width: 200px"></el-input>
                                    </el-form-item>
                                  </el-form>
                                </el-form-item>
                              </el-form>
                              <div slot="footer" class="dialog-footer" v-if="createTaskMoreVisible">
                                <el-button @click="resetCreateMoreTask('createTaskMoreForm')">取 消</el-button>
                                <el-button type="primary" @click="submitCreateMoreTask('createTaskMoreForm')">确 定
                                </el-button>
                              </div>
                              <div slot="footer" class="dialog-footer" v-else>
                                <el-button @click="resetCreateBaseTask('createTaskBaseForm')">取 消</el-button>
                                <el-button type="primary" @click="submitCreateBaseTask('createTaskBaseForm')">确 定
                                </el-button>
                              </div>
                            </el-dialog>
                          </div>
                        </div>

                        <div>
                          <div class="el-checkbox-group">
                            <ul class="course-list-box" v-for="task in tasks" :key="tasks.id">
                              <li class="item flex-between">
                                <div class="card-layout-box">
                                  <div class="layout-left flex-align">
                                    <img src="../../../static/course/tasks/zuoye.png" alt="作业">
                                    <div class="another-name">
                                      <span>{{ task.label }}</span>
                                      <i></i>
                                    </div>
                                  </div>
                                  <div class="layout-right flex-between">
                                    <div class="layout-right-info">
                                      <h6 class="info-title" @click="toCheckTask(task.id)">{{ task.title }}</h6>
                                      <div class="status-bar">
                                        <span v-if="$store.getters.userInfo.usertype === 0">
                                          <span v-if="isOver(task.endTime)">已结束</span>
                                          <div v-if="isOver(task.endTime)"
                                               class="el-divider el-divider-vertical"></div>
                                        </span>
                                        <span>截止时间：{{ task.endTime }}</span>
                                        <div class="el-divider el-divider-vertical"></div>
                                        <span>个人作业</span>
                                      </div>
                                      <p class="learning-state" v-if="$store.getters.userInfo.usertype === 1">
                                        <span class="font-color-warning">{{
                                            task.submited === 0 ? '未提交' : '已提交'
                                          }}</span>
                                      </p>
                                    </div>
                                    <div class="layout-right-functional" v-if="$store.getters.userInfo.usertype === 0">
                                      <div class="learning-situation">
                                        <span class="item-info">
                                          <i class="font-color--main">{{
                                              task.isChecked === null ? 0 : task.isChecked
                                            }}</i>
                                          <i class="pt-text">已批</i>
                                        </span>
                                        <span class="item-info">
                                          <i class="font-color--main">{{
                                              task.notChecked === null ? 0 : task.notChecked
                                            }}</i>
                                          <i class="pt-text">未批</i>
                                        </span>
                                        <span class="item-info">
                                          <i class="font-color--main">{{
                                              task.notSubmited === null ? 0 : task.notSubmited
                                            }}</i>
                                          <i class="pt-text">未交</i>
                                        </span>
                                      </div>
                                      <el-dropdown trigger="click" style="margin: 0 16px; cursor:pointer;">
                                        <span class="el-dropdown-link" style="display: flex;flex-direction: column">
                                          <i class="el-icon-more-outline" style="margin-bottom: 5px"></i>
                                          更多
                                        </span>
                                        <el-dropdown-menu slot="dropdown">
                                          <el-dropdown-item style="display: block">编辑</el-dropdown-item>
                                          <el-dropdown-item style="display: block">移动到章节</el-dropdown-item>
                                          <el-dropdown-item style="display: block">保存到备课区</el-dropdown-item>
                                          <el-dropdown-item style="display: block">
                                            <div @click="deleteTaskByTaskId(task.id)">删除</div>
                                          </el-dropdown-item>
                                        </el-dropdown-menu>
                                      </el-dropdown>
                                    </div>
                                    <div class="layout-right-functional" style="margin-right: 20px" v-else>
                                      <el-button type="primary" size="small" v-if="task.submited === 0" @click="showSubmitVisible(task.id)">
                                        提交作业
                                      </el-button>
                                      <el-button type="primary" size="small" v-else disabled>
                                        已提交
                                      </el-button>
                                    </div>
                                  </div>
                                </div>
                              </li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="测试" name="fourth">测试</el-tab-pane>
                  <el-tab-pane label="资料" name="fifth">
                    <ResourceBoard v-if="course.courseCode" :course-code="course.courseCode"/>
                  </el-tab-pane>
                  <el-tab-pane label="腾讯会议" name="sixth">腾讯会议</el-tab-pane>
                  <el-tab-pane label="公告" name="seventh">公告</el-tab-pane>
                  <el-tab-pane label="话题" name="eighth">话题</el-tab-pane>
                  <el-tab-pane label="互动答题" name="ninth">互动答题</el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </div>
      </el-main>
      <el-footer></el-footer>


      <el-dialog title="提交作业" :visible.sync="submitTaskFormVisible">
        <el-form ref="submitTaskFo" :model="submitTaskForm" :rules="submitTaskRules">
          <el-form-item
            label="作业内容"
            label-width="80px"
            prop="content">
            <el-input
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 5}"
              placeholder="请输入内容"
              v-model="submitTaskForm.content">
            </el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="resetTaskForm('submitTaskFo')">取 消</el-button>
          <el-button type="primary" @click="submitTask('submitTaskFo')">确 定
          </el-button>
        </div>
      </el-dialog>
    </el-container>
  </div>
</template>

<script>
import PublicHeader from "../../components/PublicHeader";
import HeaderRight from "../../components/HeaderRight";
import {mymessage} from "../../tools/mymessage";
import {Auth} from "../../store/user/auth";
import axios from "axios";
import {postRequest, service} from "../../tools/api";
import {downFileFromBlob} from "../../tools/download";
import FileCard from "../../components/FileCard";
import DirectoryCard from "../../components/DirectoryCard";
import ResourceBoard from "../../components/ResourceBoard";

export default {
  name: "CourseDetail",
  components: {ResourceBoard, DirectoryCard, FileCard, HeaderRight, PublicHeader},
  data() {
    return {
      drawer: false,
      menus: [
        {
          name: '我的课堂',
          route: '/courseList'
        },
        {
          name: '备课区',
          route: '/lessonPreparation'
        },
        {
          name: '论文管理',
          route: '/thesisDefense'
        }
      ],
      course: {},
      activeNav: 'third',
      dialogFormVisible: false,
      tasks: [
        {
          details: "",
          endTime: "",
          id: "",
          isChecked: null,
          label: "",
          notChecked: null,
          notSubmited: null,
          status: -1,
          step: -1,
          title: ""
        }
      ],
      currentTime: '',
      createTaskVisible: false,
      createTaskMoreVisible: false,
      createTaskBaseForm: {
        courseId: '',
        title: "",
        details: "",
        label: "作业",
        step: 0,
        status: 0  // 作业未发布0,作业发布1
      },
      createTaskMoreForm: {
        courseId: '',
        title: "",
        details: "",
        label: "作业",
        step: 0,
        status: 1,  // 作业未发布0,作业发布1
        startTime: "",
        endTime: "",
        totalScore: ''
      },
      step: [
        {
          label: '课前',
          value: 0
        },
        {
          label: '课中',
          value: 1
        },
        {
          label: '课后',
          value: 2
        },
        {
          label: '期中',
          value: 3
        },
        {
          label: '期末',
          value: 4
        },
      ],
      releaseAndDeadline: '',
      baseRules: {
        title: [
          {required: true, message: '请输入作业标题', trigger: 'blur'},
        ],
      },
      moreRules: {
        startTime: [
          {required: true, message: '请选择开始时间和截止时间', trigger: 'blur'},
        ],
        totalScore: [
          {required: true, message: '请输入作业总分', trigger: 'blur'}
        ]
      },
      submitTaskFormVisible: false,
      submitTaskForm: {
        userId: -1,
        taskId: -1,
        content: ""
      },
      submitTaskRules: {
        content: [
          {required: true, message: '请输入作业内容', trigger: 'blur'}
        ]
      },
      submitTaskId: ''
    }
  },
  methods: {
    init() {
      this.getCourseById()
      if (this.$store.getters.userInfo.usertype === 0) {
        this.getTaskByCourseId()
      } else {
        this.getStudentTask()
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    toNav(nav) {
      this.$router.push(nav)
    },
    getCourseById() {
      var courseId = this.$store.getters.courseId

      this.getRequest('/course/getCourseDetails/' + courseId).then(resp => {
        if (resp.code === 200) {
          this.course = resp.data;
        }
      })
    },
    toMember() {
      this.$router.push('/courseList/member')
    },
    getTaskByCourseId() {
      var courseId = this.$store.getters.courseId

      this.getRequest('/task/findTeacherTask/' + courseId).then(resp => {
        console.log("tasksResp", resp);
        if (resp.code === 200) {
          this.tasks = resp.data
          this.currentTime = this.getCurrentTime();
        }
      })
    },
    getStudentTask() {
      var courseId = this.$store.getters.courseId
      var userid = this.$store.getters.userInfo.id

      this.getRequest('task/findStudentTask/' + courseId + '/' + userid).then(resp => {
        console.log("stuTasksResp", resp);
        if (resp.code === 200) {
          this.tasks = resp.data
          // this.currentTime = this.getCurrentTime();
        }
      })
    },
    getCurrentTime() {
      return this.timeFormate(new Date());
    },
    // 返回当前时间（年-月-日）
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month = new Date(timeStamp).getMonth() + 1 < 10 ? "0" + (new Date(timeStamp).getMonth() + 1) : new Date(timeStamp).getMonth() + 1;
      let date = new Date(timeStamp).getDate() < 10 ? "0" + new Date(timeStamp).getDate() : new Date(timeStamp).getDate();

      return year + "-" + month + "-" + date;
    },
    isOver(endTime) {
      if (Number(endTime.substring(0, 4)) - Number(this.currentTime.substring(0, 4)) < 0) {
        return true
      } else if (Number(endTime.substring(5, 7)) - Number(this.currentTime.substring(5, 7)) < 0) {
        return true
      } else return Number(endTime.substring(8, 10)) - Number(this.currentTime.substring(8, 10)) < 0;
    },
    submitCreateBaseTask(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.createTaskBaseForm.courseId = this.$store.getters.courseId

          this.postRequest('/task/create', this.createTaskBaseForm).then(resp => {
            console.log("baseResp", resp);
            if (resp.code === 200) {
              this.init()
              this.resetCreateBaseTask()
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetCreateBaseTask(form) {
      this.createTaskVisible = false
      this.$refs[form].resetFields();
    },
    submitCreateMoreTask(form) {
      this.$refs['createTaskBaseForm'].validate((valid) => {
        if (valid) {
          console.log("this.createTaskBaseForm", this.createTaskBaseForm);

          this.createTaskMoreForm.title = this.createTaskBaseForm.title
          this.createTaskMoreForm.details = this.createTaskBaseForm.details
          this.createTaskMoreForm.label = this.createTaskBaseForm.label
          this.createTaskMoreForm.step = this.createTaskBaseForm.step
          this.$refs[form].validate((valid) => {
            if (valid) {
              this.createTaskMoreForm.courseId = this.$store.getters.courseId

              let startTime = this.timeFormate(this.createTaskMoreForm.startTime[0])
              let endTime = this.timeFormate(this.createTaskMoreForm.startTime[1])
              this.createTaskMoreForm.startTime = startTime
              this.createTaskMoreForm.endTime = endTime

              this.postRequest('task/create', this.createTaskMoreForm).then(resp => {
                console.log("moreResp");
                if (resp.code === 200) {
                  // console.log("this.createTaskMoreForm", this.createTaskMoreForm);
                  this.init()
                  this.resetCreateMoreTask(form)
                }
              })
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetCreateMoreTask(form) {
      this.createTaskVisible = false
      this.createTaskMoreVisible = false
      this.$refs[form].resetFields();
      this.$refs['createTaskBaseForm'].resetFields();
    },
    deleteTaskByTaskId(id) {
      this.$confirm('此操作将永久删除该作业, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/task/delete/' + id).then(resp => {
          if (resp.code === 200) {
            mymessage.success("删除课程成功")
            this.init()
          }
        })
      }).catch(() => {
        mymessage.info('取消删除')
      });
    },
    showSubmitVisible(taskId) {
      this.submitTaskFormVisible = true
      this.submitTaskId = taskId
    },
    submitTask(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.submitTaskForm.taskId = this.submitTaskId
          this.submitTaskForm.userId = this.$store.getters.userInfo.id
          // console.log("pass", this.submitTaskForm);

          this.postRequest('/task/submit', this.submitTaskForm).then(resp => {
            console.log("resp", resp);
            if (resp.code === 200) {
              mymessage.success('作业提交成功')
              this.resetTaskForm(form)
              this.init()
            } else {
              mymessage.info('作业提交失败')
            }
          })
        } else {
          return false;
        }
      });
    },
    resetTaskForm(form) {
      this.submitTaskFormVisible = false
      this.$refs[form].resetFields()
    },
    toCheckTask(taskId) {
      this.$store.commit('SAVA_CURRENT_TASK_ID', taskId)
      this.$router.push('/courseList/courseDetail/checkTask')
    }
  },
  created() {
    this.init()
  }
}
</script>

<style scoped>
.view-class-detail {
  width: 1224px;
  margin: auto;
}

.view-class-detail .head-layout {
  position: relative;
  background: rgb(232, 240, 255);
  border-radius: 8px 8px 0 0;
  height: 200px;
}

.view-class-detail .head-layout .head-top {
  position: absolute;
  width: 1176px;
  height: 152px;
  left: 0;
  top: 0;
  padding: 24px;
  color: rgb(255, 255, 255);
  display: flex;
}

.view-class-detail .head-layout .head-top .left {
  flex: 1 1 0%;
}

.view-class-detail .head-layout .head-top .left h1 {
  font-size: 36px;
}

.text_overflow1 {
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
  -webkit-box-orient: vertical;
}

.view-class-detail .head-layout .head-top .left h2 {
  font-size: 20px;
  line-height: 32px;
  font-weight: 400;
}

.view-class-detail .head-layout .head-top .left .code {
  margin-top: 55px;
  font-size: 14px;
  font-weight: 400;
}

.flex-align {
  display: flex;
  align-items: center;
}

.view-class-detail .head-layout .head-top .left .code .code-but {
  cursor: pointer;
  margin-right: 16px;
}


.view-class-detail .head-layout .head-top .right {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}

.view-class-detail .head-layout .head-top .right .change {
  cursor: pointer;
  align-self: flex-end;
}

.view-class-detail .head-layout .head-top .right .packdownload {
  cursor: pointer;
  margin-right: 10px;
}

.view-class-detail .head-layout .head-top .right .change {
  cursor: pointer;
  align-self: flex-end;
}

.view-class-detail .head-layout .head-top .right .group {
  position: absolute;
  right: 24px;
  bottom: 24px;
}

.view-class-detail .head-layout .head-top .right .group .el-button {
  color: #ff6000;
  margin-left: 24px;
  min-width: 120px;
}

.view-class-detail .head-bottom {
  width: 1224px;
  height: 64px;
  color: #3c4043;
  font-size: 14px;
  font-weight: 400;
  justify-content: center;
  background: #fff;
  border-radius: 0 0 8px 8px;
  /*box-shadow: 0 2px 4px 0 rgb(0 0 0 / 10%);*/
}

.flex-align {
  display: flex;
  align-items: center;
}

.view-class-detail .head-bottom .bar .active {
  background: #e8f0ff;
  color: #4285f4;
  border-radius: 20px;
}

.view-class-detail .head-bottom .bar .bar-item {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  margin: 0 24px;
  text-align: center;
  font-size: 17px;
  padding-left: 5px;
  padding-right: 5px;
}

.view-class-detail .head-bottom .bar .bar-item {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  margin: 0 24px;
  text-align: center;
  font-size: 17px;
  padding-left: 5px;
  padding-right: 5px;
}

.view-class-detail .head-bottom .bar .bar-item {
  cursor: pointer;
  height: 40px;
  line-height: 40px;
  margin: 0 24px;
  text-align: center;
  font-size: 17px;
  padding-left: 5px;
  padding-right: 5px;
}

.view-class-detail .component-layout {
  margin: 10px 0 0 0;
}

.plugins-course-layout {
  min-height: 500px;
}

.tab-contain {
  position: relative;
}

.plugin-work .head-box {
  align-items: center;
  margin-top: 10px;
}

.plugin-work .head-box {
  align-items: center;
  margin-top: 10px;
}

.plugin-work .head-box {
  align-items: center;
  margin-top: 10px;
}

.plugin-work .head-box h3 {
  font-size: 14px;
}

.flex-align {
  display: flex;
  align-items: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.el-checkbox-group {
  font-size: 0;
}

.course-list-box {
  padding-top: 16px;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
  text-align: left;
}

.course-list-box {
  padding-top: 16px;
  border: 1px solid #e7ebf0;
  border-radius: 8px;
  margin-top: 8px;
  margin-bottom: 10px;
}

.card-layout-box {
  width: 100%;
  background: #fff;
  display: flex;
  position: relative;
}

.card-layout-box .layout-left {
  flex-direction: column;
  min-width: 85px;
  margin: 0 16px 25px 0;
  font-size: 12px;
}

.card-layout-box .layout-right {
  width: 100%;
  border-bottom: 1px solid #eee;
  padding: 0 0 8px;
  font-size: 14px;
}

.card-layout-box .layout-right-info .info-title {
  font-size: 16px;
  margin-bottom: 12px;
  max-width: 500px;
  cursor: pointer;
  color: #212121;
  display: -webkit-box;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: normal;
}

.el-divider-vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  margin: 0 8px;
  vertical-align: middle;
  position: relative;
}

.card-layout-box .layout-right-info .status-bar {
  color: #5f6368;
  font-size: 12px;
}

.card-layout-box .layout-right-info .learning-state {
  font-size: 12px;
  padding-top: 8px;
}

.font-color-warning {
  color: #ff941f;
}

.card-layout-box .layout-right-functional {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex: 1;
  font-size: 12px;
}

.card-layout-box .layout-right-functional .learning-situation {
  display: flex;
  justify-content: center;
  border-right: 1px solid #e7ebf0;
}

.card-layout-box .layout-right-functional .learning-situation .item-info {
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  min-width: 72px;
}

.card-layout-box .layout-right-functional .learning-situation .item-info i {
  display: block;
  font-size: 20px;
  font-style: normal;
}

.font-color--main {
  color: #4285f4;
}

.card-layout-box .layout-right-functional .learning-situation .item-info .pt-text {
  font-size: 12px;
  color: #202124;
}
</style>
